<template>
    <div class="box">
        <h4 class="header">
            预警级别<span class="titleEn">Alert level</span>
        </h4>
        <div class="main">
            <Pie :pieOptions="pieOptions"></Pie>
        </div>
    </div>
</template>
<script setup>
import Pie from '@/components/pie.vue';
import * as echarts from 'echarts'
let pieOptions = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)',
    },
    legend: {
        orient: 'vertical',
        top: "center",
        // left: 'left',
        selectedMode: false,
        right: '15%',
        icon: 'circle',
        // data: ['低', '中', '高'],
        formatter: (name) => {
            // 在这里自定义 legend 的显示文本
            // statModels是后端返回的对象，对应每个参数的总数据
            return `预警级别：${name}`
        },
        textStyle: {
            color: '#fff',
            fontSize: 12,
        }

    },

    series: [
        {
            name: '预警级别',
            type: 'pie',
            radius: ['45%', '60%'],
            center: ['30%', '50%'],
            label: {
                color: 'inherit',
                normal: {
                    // 各分区的提示内容
                    // params: 即下面传入的data数组,通过自定义函数，展示你想要的内容和格式
                    formatter:'{d}%',
                    textStyle: {            // 提示文字的样式
                        color: 'inherit',
                        fontSize: 14
                    }
                }
            },
            data: [
                { value: 335, name: '高', itemStyle: { color: '#ff0000' } },
                { value: 610, name: '中', itemStyle: { color: '#fffa00' } },
                { value: 234, name: '低', itemStyle: { color: '#1106f3' } },
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]


}
</script>
<style scoped src="@/components/yujing/index.css"></style>